<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/my.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1, user-scalable=no">
</head>
<body>
<div class="header-box">
  <p id="list_title">阅读打卡</p>
</div>
<div>
  <div class="qiandao">
    <div class="daka_num">
      <img src="img/my/qiandao@2x.png">
      <span><i>219</i><b>天</b></span>
    </div>
    <div class="chose_ym">
      <b id="prev_date"><</b>
      <span id="yea_mon">2018年4月</span>
      <b id="next_data">></b>
    </div>
    <div class="nums" id="nums">

    </div>
    <div class="read_daka">
      <a href="javascript:;" id="daka" class="daka">阅读打卡</a>
    </div>
  </div>
</div>

<div class="footer_kb"></div>
</body>
<script src="js/jquery.js"></script><script src="js/jquery.cookie.js"></script>
<script src="js/base.js?v=base.js?v=20180102"></script>
<script>
    var isShowDaka=1;
    $("#daka").click(function () {
      isShowDaka=2;
      $(this).css("display","none").attr("class","");
      drawCal((new Date).getFullYear(),(new Date).getMonth() + 1,(new Date).getFullYear()+"年"+((new Date).getMonth() + 1)+"月");
    });

    getDaysInmonth = function(iMonth, iYear){
      var dPrevDate = new Date(iYear, iMonth, 0);
      return dPrevDate.getDate();
    };
    var dCalDate = new Date((new Date).getFullYear(), (new Date).getMonth(), 1);
    bulidCal = function(iYear, iMonth) {
      var aMonth = new Array();
      aMonth[0] = new Array(7);
      aMonth[1] = new Array(7);
      aMonth[2] = new Array(7);
      aMonth[3] = new Array(7);
      aMonth[4] = new Array(7);
      aMonth[5] = new Array(7);
      aMonth[6] = new Array(7);

      var iDayOfFirst = dCalDate.getDay();
      var iDaysInMonth = getDaysInmonth(iMonth, iYear);
      var iVarDate = 1;
      var d, w;
      aMonth[0][0] = "日";
      aMonth[0][1] = "一";
      aMonth[0][2] = "二";
      aMonth[0][3] = "三";
      aMonth[0][4] = "四";
      aMonth[0][5] = "五";
      aMonth[0][6] = "六";
      for (d = iDayOfFirst; d < 7; d++) {
        aMonth[1][d] = iVarDate;
        iVarDate++;
      }
      for (w = 2; w < 7; w++) {
        for (d = 0; d < 7; d++) {
          if (iVarDate <= iDaysInMonth) {
            aMonth[w][d] = iVarDate;
            iVarDate++;
          }
        }
      }
      return aMonth;
    };
    ifHasSigned = function(signList,day){
      var signed = 1;
      var gg=new Date().getDate();
      if (isShowDaka==true && gg == day) {
          signed = 3;
          return signed ;
      }
      $.each(signList,function(index,item){
        var date = new Date(item.signDate);
        if(date.getDate() == day) {
          signed = 2;
          return false;
        }
      });
      return signed ;
    };
    drawCal = function(iYear,iMonth,currentYearMonth) {
      $("#yea_mon").html(currentYearMonth);
      var ss=new Date().getTime();
      if (isShowDaka==1){                            //今日未打卡前，
        var signList=[                            //模拟后台返回的用户已打卡的时间戳
          {signDate:1527850549123},               //2018-06-1 18:55:49:123
          {signDate:1527936949123},               //2018-06-2 18:55:49:123
          {signDate:1528109749123}                //2018-06-4 18:55:49:123
        ];
      }else if(isShowDaka==2) {                                      //今日打卡后
        var signList=[                            //模拟后台返回的用户已打卡的时间戳
          {signDate:1527850549123},               //2018-06-1 18:55:49:123
          {signDate:1527936949123},               //2018-06-2 18:55:49:123
          {signDate:1528109749123},               //2018-06-4 18:55:49:123
          {signDate:ss},                          //当前时间的时间戳
        ];
      }else if(isShowDaka==3) {
        var signList=[];
      }
      var myMonth = bulidCal(iYear, iMonth);
      var htmls = "";
      htmls+=`<div class='sign' id='sign_cal'>`;
      htmls+=`<table class='table'>`;
      htmls+=`<tr>`;
      htmls+=`<th>` + myMonth[0][0] + `</th>`;
      htmls+=`<th>` + myMonth[0][1] + `</th>`;
      htmls+=`<th>` + myMonth[0][2] + `</th>`;
      htmls+=`<th>` + myMonth[0][3] + `</th>`;
      htmls+=`<th>` + myMonth[0][4] + `</th>`;
      htmls+=`<th>` + myMonth[0][5] + `</th>`;
      htmls+=`<th>` + myMonth[0][6] + `</th>`;
      htmls+=`</tr>`;
      var d, w;
      for (w = 1; w < 7; w++) {
        htmls+=`<tr>`;
        for (d = 0; d < 7; d++) {
          var ifHasSign = ifHasSigned(signList,myMonth[w][d]);
          if(ifHasSign==2){
            htmls+=`<td class='on'><span>` + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + `</span></td>`;
          }else if (ifHasSign==3){
            htmls+=`<td class='onon'><span>` + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + `</span></td>`;
          }else if (ifHasSign==1) {
            htmls+=`<td><span>` + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + `</span></td>`;
          }
        }
        htmls+=`</tr>`;
      }
      htmls+=`</table>`;
      htmls+=`</div>`;
      htmls+=`</div>`;
      $("#nums").html(htmls);
    };
    drawCal((new Date).getFullYear(),(new Date).getMonth() + 1,(new Date).getFullYear()+"年"+((new Date).getMonth() + 1)+"月");
    var
    strYear = (new Date).getFullYear(),
    strMonth = (new Date).getMonth()+1;
    $("#prev_date").click(function () {
        var str=getLastMonthYestdy();
        console.log(1);
        if (strYear>(new Date).getFullYear()){
          isShowDaka=3;
          drawCal(strYear,strMonth,str);
          $("#daka").css("display","none");
        }else if(strYear==(new Date).getFullYear()){
          if (strMonth>(new Date).getMonth()+1){
            isShowDaka=3;
            drawCal(strYear,strMonth,str);
            $("#daka").css("display","none");
          } else if(strMonth==(new Date).getMonth()+1){
            if ($("#daka").hasClass("daka")) {
              console.log(1);
              isShowDaka=1;
              drawCal(strYear,strMonth,str);
              $("#daka").css("display","block");
            }else{
              console.log(2);
              isShowDaka=2;
              drawCal(strYear,strMonth,str);
              $("#daka").css("display","none");
            }
          }else if (strMonth<(new Date).getMonth()+1) {
            isShowDaka=2;
            drawCal(strYear,strMonth,str);
            $("#daka").css("display","none");
          }

        }else if (strYear<(new Date).getFullYear()) {
          isShowDaka=2;
          drawCal(strYear,strMonth,str);
          $("#daka").css("display","none");
        }
    });
    function getLastMonthYestdy(){
      var daysInMonth = new Array([0],[31],[28],[31],[30],[31],[30],[31],[31],[30],[31],[30],[31]);

      if(strYear%4 == 0 && strYear%100 != 0){
        daysInMonth[2] = 29;
      }
      if(strMonth - 1 == 0)
      {
        strYear -= 1;
        strMonth = 12;
      }
      else
      {
        strMonth -= 1;
        dCalDate = new Date(strYear, strMonth - 1, 1);
      }

      var datastr1 = strYear+"年"+strMonth+"月";
      return datastr1;
    }
    $("#next_data").click(function () {
       var str2=getNextMonthYestdy();
       if (strYear>(new Date).getFullYear()){
         isShowDaka=3;
         drawCal(strYear,strMonth,str2);
         $("#daka").css("display","none");
       }else if(strYear==(new Date).getFullYear()){
         if (strMonth>(new Date).getMonth()+1){
           isShowDaka=3;
           drawCal(strYear,strMonth,str2);
           $("#daka").css("display","none");
         }else if (strMonth==(new Date).getMonth()+1){
           if ($("#daka").hasClass("daka")) {
             console.log(3);
             isShowDaka=1;
             drawCal(strYear,strMonth,str2);
             $("#daka").css("display","block");
           }else{
             console.log(4);
             isShowDaka=2;
             drawCal(strYear,strMonth,str2);
             $("#daka").css("display","none");
           }
         }else if (strMonth<(new Date).getMonth()+1) {
           isShowDaka=2;
           drawCal(strYear,strMonth,str2);
           $("#daka").css("display","none");
         }
       }else if (strYear<(new Date).getFullYear()) {
         isShowDaka=2;
         drawCal(strYear,strMonth,str2);
         $("#daka").css("display","none");
       }
    });
    function getNextMonthYestdy(){
      var daysInMonth = new Array([0],[31],[28],[31],[30],[31],[30],[31],[31],[30],[31],[30],[31]);

      if(strYear%4 == 0 && strYear%100 != 0){
        daysInMonth[2] = 29;
      }
      if(strMonth == 12)
      {
        strYear += 1;
        strMonth = 1;
      }
      else
      {
        strMonth += 1;
        dCalDate = new Date(strYear, strMonth - 1, 1);
      }

      var datastr2 = strYear+"年"+strMonth+"月";
      return datastr2;
    }
</script>
</html>